<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{     position:absolute; } 
        .xx-box{     
            left:50%;     
            top:50%;     
            margin-left:-250px;     
            margin-top:-250px;     
            width:500px;     
            height:500px;     
            background-color:#000;
             } 
        .xx-box .text{     
            top:30%;     
            height:48px;     
            line-height:48px;     
            color:#f00;     
            text-shadow: 3px 3px 4px #f00;     
            font-size:36px;     
            font-weight:bold;
            width:100%;     
            text-align:center;     
            font-family:Tangerine,Tahoma,Arial,"\65f6\5c1a\4e2d\9ed1\7b80\4f53","\5b8b\4f53"; 
            } 
            .xx-box .item{     width:2px;     height:20px;     overflow:hidden; } 
    </style>
</head>
<body>
    <div class="xx-box" id="xx-box">     
    <div class="text">I Love You</div> 
    </div> 
</body>
<script> function createPoint(x,y,c){     var div = document.createElement("div");     div.className = "item";     div.style.left = x + "px";     div.style.top = y + "px";     div.style.backgroundColor = c;     document.getElementById("xx-box").appendChild(div); } function heartShape(r,dx,dy,c){   var m,n,x,y,i;     for(i = 0; i <= 200; i += 0.04){         m = i;         n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2);         x = n * Math.cos(m) + dx;         y = n * Math.sin(m) + dy;         createPoint(x,y,c);     } } heartShape(80,250,100,"#f00"); 
</script> 
</html>